<template>
  <el-dialog title="投诉工单详情" :visible.sync="visible" width="1000px" :append-to-body="true">
    <div class="plr-40">
      <el-form :model="complaintData" label-width="120px">
        <el-form-item label="后台单号">
          <span>{{complaintData.xmbzNo}}</span>
        </el-form-item>
        <el-form-item label="配送时间">
          <span>{{complaintData.deliveryStartTime}} ~ {{complaintData.deliveryEndTime}}</span>
        </el-form-item>
        <el-form-item label="配送员">
          <span>{{complaintData.delivery}}</span>
        </el-form-item>
        <el-form-item label="平台单号">
          <span>{{complaintData.platformNo || '-'}}</span>
        </el-form-item>
        <el-form-item label="创建工单时间">
          <span>{{complaintData.createTime}}</span>
        </el-form-item>
        <el-form-item label="部门失误类型">
          <span>{{complaintData.responsibleDepartmentErrorText}}</span>
        </el-form-item>
        <el-form-item label="投诉等级">
          <span>{{complaintData.complaintLevelName}}</span>
        </el-form-item>
        <el-form-item label="处理状态">
          <span>{{complaintData.handleStateName}}</span>
        </el-form-item>
        <el-form-item label="投诉渠道">
          <span>{{complaintData.complaintChannelName}}</span>
        </el-form-item>
        <el-form-item label="责任人">
          <span>{{complaintData.personLiable}}</span>
        </el-form-item>
        <el-form-item label="手机号码">
          <span>{{complaintData.phone}}</span>
        </el-form-item>
        <el-form-item label="投诉内容 ">
          <div class="processingResults">{{complaintData.complaintContent}}</div>
        </el-form-item>
        <el-form-item label="处理结果">
          <div class="processingResults">{{complaintData.processingResults}}</div>
        </el-form-item>
        <el-form-item label="图片附件:" prop="title">
          <template v-if="extJson.img && extJson.img.length">
            <el-image
              @click.native="view(item)"
              class="w-150 h-150 mr-20 cs-p img-item"
              v-for="(item, i) in extJson.img"
              :key="i"
              :src="item">
            </el-image>
          </template>
        </el-form-item>
      </el-form>
    </div>

    <!-- 显示图片 -->
    <el-dialog :visible.sync="isImgShow" width="50%" :append-to-body="true">
      <img :src="priviewSrc" style="width: 100%" />
    </el-dialog>
  </el-dialog>
</template>

<script>
import { OrderComplaintPage } from '@/api/workorder'
export default {
  data() {
    return {
      visible: false,
      isImgShow: false,
      priviewSrc: '',
      complaintData: {},
      orderData: {},
      extJson: {}
    }
  },
  methods: {
    show(order) {
      this.visible = true
      this.orderData = order
      this.getComplaintData()
    },
    view(src) {
      this.priviewSrc = src
      this.isImgShow = true
    },
    getComplaintData() {
      OrderComplaintPage({id: this.orderData.complaintContentId}).then(res => {
        if (res.data.data && res.data.data.rows) {
          this.complaintData = res.data.data.rows[0] || {}
        }

        if (this.complaintData.extJson) {
          this.extJson = JSON.parse(this.complaintData.extJson) || {}
        }
      })
    }
  },
  components: {
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0px;
}
.img-item {
  border: 1px solid #ddd;
}
</style>